<template>
  <div class="top_menu">
    <!-- 组织机构 -->
    <!-- <organization-view /> -->
    
    <!-- 人员管理 -->
    <!-- <person-management ref="usermanage"/> -->
    
    <!-- 作业区域道路设定 -->
    <!-- <work-area-list ref="areawork"/> -->
    
    <!-- 考勤管理 -->
    <!-- <attendance-view ref="attendance"/> -->
    
    <!-- 查询统计 -->
    <!-- <queryStattistics-view/> -->
    
    <!-- 实时在线统计 -->
    <span style="color: #606266;font-size: 16px;padding: 0 20px;" @click="worktongji">实时在线统计</span>

    <!-- 查询统计 -->
    <test-view/>

    <!-- 出车统计 -->
    <VehicleWork/>

    <!-- 油耗统计 -->
    <!-- <Oilconsumption/> -->

    <span style="color: #606266;font-size: 16px;padding: 0 20px;" @click="showHaobaoPage">视频监控</span>

    <!-- 搜索框 -->
    <!-- <div class="search-bar">
      <el-input placeholder="请输入姓名或车辆名称" v-model="searchKey" class="input-with-select">
        <el-select v-model="selectValue" slot="prepend" placeholder="请选择">
          <el-option label="全部" value="1"></el-option>
          <el-option label="人员" value="2"></el-option>
          <el-option label="车辆" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div> -->

    <el-button size="mini" type="primary" @click="onlyShowHeader()">隐藏其它</el-button>
    <el-button size="mini" type="primary" @click="requestFullScreen()" v-if="!isFull">全屏</el-button>
    <el-button size="mini" type="primary" @click="exitFullscreen()" v-else>退出全屏</el-button>

    <span class="warningInfo" @click="toShowWarningInfo" v-if="showWarningInfo">报警信息<i class="el-icon-d-arrow-right"></i></span>
    <span class="warningInfo" @click="toHideWarningInfo" v-if="!showWarningInfo"><i class="el-icon-d-arrow-left"></i>报警信息</span>
    
    <!-- 数据一张图 -->
    <!-- <span @click="openYZT" style="cursor: pointer;padding-left:20px;" class="spanhover">数据一张图</span> -->
    
    <!-- 实时在线数据 -->
    <div class="statistical" v-if="Visible">
      <div class="title">
        <i class="iconfont icon-tongji1" />
        <h3>实时在线统计</h3>
        <span class="iconfont icon-guanbi close" @click="close" />
      </div>
      <div class="statistical_content">
        <el-table :data="statisticalData" style="width: 100%" stripe border>
          <!-- <el-table-column prop="名称" label="区域" align="center"></el-table-column> -->
          <el-table-column prop="AreaName" label="区域" align="center"></el-table-column>
          <el-table-column prop="OnlineVehicle" label="在线车辆(作业)" align="center"></el-table-column>
          <el-table-column prop="AllVehicle" label="全部车辆" align="center"></el-table-column>
        </el-table>
      </div>
      <div
        class="statistical_time"
      >统计时间：{{new Date().toLocaleDateString() + ' - ' + new Date().toTimeString().split(' ')[0]}}</div>
    </div>
    
<!--设置一张图时间 -->
    <div class="set_time_box" v-if="Visible2">
      <h2>
        <span>设置时间段</span>
        <i class="iconfont icon-guanbi" @click="YZT.show = false"></i>
      </h2>
      <div class="content">
        <div>
          <span>开始时间</span>
          <el-date-picker
            v-model="YZT.startTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
        <div>
          <span>结束时间</span>
          <el-date-picker
            v-model="YZT.endTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
        <div>
          <el-button type="primary" @click="openYZT">确 定</el-button>
        </div>
      </div>
    </div>

  </div>
  
</template>

<script>
import eventBus from '@/eventBus.js'

// // 作业区域道路设定
// import WorkAreaList from '@/views/CleanerWork/TopToolbar/WorkAreaList.vue'
// // 组织机构
// import Organization from '@/views/CleanerWork/TopToolbar/Organization.vue'
// // 人员管理
// import PersonManagement from '@/views/CleanerWork/TopToolbar/PersonManagement.vue'
// // 考勤管理
// import Attendance from '@/views/CleanerWork/TopToolbar/Attendance.vue'
// //查询统计 
// import queryStatistics from '@/views/CleanerWork/TopToolbar/QueryStatistics.vue'
//查询统计 
import zylxz from '@/views/CleanerWork/TopToolbar/zylxz.vue'
//出车统计 
import VehicleWork from '@/views/CleanerWork/TopToolbar/VehicleWork.vue'
//油耗统计 
import Oilconsumption from '@/views/CleanerWork/TopToolbar/Oilconsumption.vue'
export default {
  data(){
    return{
       // 是否显示实时在线统计对话框
        Visible: false,
        statisticalData: [],
        MouseEvent: {
          top: 0,
          left: 0,
          isShow: false
        },
        Visible2:false,
        // YZT:{
        //   show:false,
        //   startTime:'',
        //   endTime:''
        // }
        showWarningInfo: false,
        searchKey: '',
        selectValue: '',
        isFull: false
    }
  },
  methods: {
    openYZT(){
      this.$refs.attendance.openYZT()
    },
    showHaobaoPage () {
      var url = 'http://111.160.78.62:88/808gps/index.html?account=bhclc&password=bhclc&clientLogin=2'
      window.open(url);
    },
    // 实时在线统计
    async onlineStatistics () {
      this.Visible = true
      // var url = `/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=${this.$route.query.StreetNo}`
      // http://111.160.78.62:9942/GarbagePointsApi/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=2
      var url = '/DataListCompany/GetRealTimeOnlineApi?ClientNo=0000019'
      const { data } = await this.$Http.get(url)
      this.statisticalData = data
      // eventBus.$emit('isCover', this.Visible)
    },
    // 关闭实时在线统计
    close () {
      this.Visible = false
      // eventBus.$emit('isCover', this.Visible)
    },
    //用户管理
      userstration () {
        this.$refs.usermanage.personManage()
      },
      //区域道路设定
      area(){
        this.$refs.areawork.openPersonnelRoad();
      },
      alarmalter(){
        
      },
      worktongji(){
        this.onlineStatistics();
      },
      // 显示报警信息
      toShowWarningInfo() {
        this.showWarningInfo = false;
        eventBus.$emit('toShowWarningInfo');
      },
      // 隐藏报警信息
      toHideWarningInfo() {
        this.showWarningInfo = true;
        eventBus.$emit('toHideWarningInfo');
      },
      // 仅显示头
      onlyShowHeader() {
        this.toHideWarningInfo();
        eventBus.$emit('toHideMapInfo');
        eventBus.$emit('toHideFooter');
        eventBus.$emit('toHideLegend');
      },
      // 进入全屏
      requestFullScreen() {
        this.isFull = true;
        eventBus.$emit('contentToFullScreen');
        var de = document.documentElement;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        }
      },
      // 退出全屏
      exitFullscreen() {
        this.isFull = false;
        eventBus.$emit('contentToDefaultScreen');
        var de = document;
        if (de.exitFullscreen) {
            de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
            de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
        }
      }
  },
  components: {
    // 'work-area-list': WorkAreaList,
    // 'organization-view': Organization,
    // 'person-management': PersonManagement,
    // 'attendance-view': Attendance,
    // 'queryStattistics-view': queryStatistics,
    'test-view': zylxz,
    'VehicleWork': VehicleWork,
    'Oilconsumption' : Oilconsumption
  },
  mounted() {
    // 监听键盘按ESC键
    let self = this;
    this.$nextTick(function () {
      document.addEventListener('keyup', function (e) {
        if (e.keyCode == 27) {
          self.exitFullscreen();
        }
      })
    })
  }
}
</script>

<style scoped lang="less">
// .BMap_mask{
//   border-left: 2px solid #007ACC!important;
// } 

.top_menu {
  height: 40px;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size:20px;
  font-weight: 600;
  padding:8px;
  position: relative;
  border:2px solid #007ACC;
  border-right: 0;
  border-left: 0;
  position: relative;
  .warningInfo {
    position: absolute;
    right: 10px;
    top: 8px;
    color: #007ACC;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    i {
      position: relative;
      top: 0px;
      font-size: 13px;
    }
  }
  .spanhover:hover{
    color: #007ACC;
  }
  /deep/.search-bar {
    margin-left: 30px;
    .el-select {
      width: 86px;
      font-size: 14px;
      .el-input__inner {
        width: 86px;
        border: none;
      }
    }
    .el-input__inner {
      border-color: #DCDFE6;
      width: 240px;
    }
  }
}
.statistical {
  width: 600px;
  min-height: 390px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    padding-left: 5px;
    box-sizing: border-box;
    h3 {
      color: #666;
    }
    span {
      margin-left: 450px;
    }
  }
  .statistical_content {
    max-height: 350px;
    min-height: 310px;
    padding: 0 20px;
    background-color: #f3f3f3;
    overflow-y: auto;
  }
  .statistical_time {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #666;
    background-color: #f3f3f3;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
  }
}
.displaynone{
  display: none;
}
.dlicon{
  width: 100%;
  position:absolute;
  z-index:75;
  left: 0;
  top: 28px;
  background-color: #007ACC;
  opacity: 1;
  display: flex;
  dl{
    width:80px;
    height: 55PX;
    margin:10px;
    margin-right:0;
    border-radius: 5px;
    border:2px solid #2c2c2c;
    box-sizing: border-box;
    background: #fff;
    padding:5px;
    dd{
      width:70%;
      height:60%;
      text-align: center;
      margin: 2% auto;
      img{
        width: 100%;
        height: 100%;

      }
    }
    dt{
      font-size: 12px!important;
      font-weight: 300;
      text-align: center;
      cursor:default;
      color: #2c2c2c;
    }
  }
  dl:hover{
    border:2px solid #ccc;
    box-shadow:0 0 15px 1px #525050;
  }
}
.content {
  height: calc(~'100% - 32px');
}
.set_time_box {
  width: 300px;
  height: 130px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  box-shadow: 0 0 5px 3px #ccc;
  background-color: #fff;
  z-index: 999999;
  h2 {
    border-bottom: 1px solid #ccc;
  }
  .content {
    padding-top: 5px;
    & > div {
      height: 26px;
      line-height: 26px;
      margin-bottom: 5px;
      padding-left: 20px;
      & > span {
        padding-right: 15px;
      }
      & > .el-button {
        float: right;
        padding: 0 5px;
        margin-right: 15px;
      }
    }
    /deep/.el-date-editor.el-input {
      width: 190px;
    }
    /deep/.el-input--prefix .el-input__inner {
      padding: 0;
      padding-left: 20px;
    }
    /deep/.el-input__prefix {
      left: -1px;
    }
  }
}
/deep/ .el-button--mini {
  padding: 4px 8px;
  margin-left: 5px;
  span {
    font-size: 12px;
  }
}
</style>